const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // js 兼容性处理: babel-loader @babel/core
            //  1. 基本 js 兼容性处理 --> @babel/preset-env
            //      用法：
            //              a. npm i babel-loader @babel/core @babel/preset-env
            //              b. 配置：{test: /\.js$/,exclude: '/node_modules/',loader: 'babel-loader',options: {presets: [['@babel/preset-env',]]}
            //      不足：只能转换基本语法，如 promise 高级语法不能转换
            //  2. 全部 js 兼容性处理 --> @babel/polyfill
            //      用法：  
            //              a. npm i @babel/polyfill
            //              b. 在相应的 js 文件引入 @babel/polyfill
            //      不足: 做了全部兼容性，导致文件过大
            //  3. 合理 js 兼容性处理,按需兼容 --> core-js（推荐方案1+3）
            //      用法：
            //              a. 先配置完方法一
            //              b. 
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                loader: 'babel-loader',
                options: {
                    // 预设：指示 babel 做怎么样的兼容性处理
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定 core-js 版本
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性做到那个版本浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
}